<template>
  <uni-popup ref="popup" type="bottom" :is-mask-click="false">
    <view class="dialog-container">
      <!-- 标题 -->
      <view class="dialog-title">处理</view>
      <uni-forms ref="formRef" :modelValue="formData" label-width="100">
        <view class="module">
          <uni-forms-item
            label="处理措施"
            name="handleMode"
            class="select-popup"
            required
            :rules="[{ required: true, errorMessage: '请选择处理措施' }]"
          >
            <view class="fault-type-picker" @click="handleModePopup.open()">
              <text v-if="formData.handleMode" style="margin-left: auto">
                {{
                  faultTypeList.find(
                    (item) => item.value === formData.handleMode
                  )?.text
                }}
              </text>
              <text v-else class="placeholder" style="margin-left: auto"
                >请选择</text
              >
              <uni-icons
                type="arrowright"
                size="24"
                color="#d7d7da"
              ></uni-icons>
            </view>
            <SelectPopup
              ref="handleModePopup"
              :items="faultTypeList"
              :value="formData.handleMode"
              @select="selectHandleMode"
            />
          </uni-forms-item>

          <uni-forms-item label="描述" name="faultDesc" class="textarea-desc">
            <textarea
              v-model="formData.faultDesc"
              placeholder="请输入"
              :maxlength="1000"
            />
          </uni-forms-item>
        </view>
        <uni-forms-item label="相关视频" class="item-bg">
          <!-- 视频上传（使用默认限制） -->
          <VideoUpload @change="(files) => (formData.video = files)" />
        </uni-forms-item>
        <uni-forms-item label="相关图片" class="item-bg">
          <!-- 图片上传（使用默认限制） -->
          <ImageUpload @change="(files) => (formData.images = files)" />
        </uni-forms-item>
      </uni-forms>

      <!-- 操作按钮 -->

      <view class="btn-group">
        <button class="transfer-btn" @click="close">取消</button>
        <button class="submit-btn" @click="submit">确定</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import ImageUpload from "@/components/ImageUpload/ImageUpload.vue";
import VideoUpload from "@/components/VideoUpload/VideoUpload.vue";
import { ref, onMounted } from "vue";
import api from "@/api/modules/home";

const $emit = defineEmits(["submit"]);

const popup = ref();

// 打开弹窗
let currRow = ref<any>(null);
const open = (row: any) => {
  currRow.value = row;
  popup.value.open();
  uni.hideTabBar();
};

// 关闭弹窗
const close = () => {
  popup.value.close();
  uni.showTabBar();
};

// 提交处理
let formRef = ref();
const submit = () => {
  formRef.value
    .validate()
    .then(() => {
      // 校验成功
      const requestData = {
        tackle_measure: formData.value.handleMode,
        tackle_description: formData.value.faultDesc,
        attachmentList: [...formData.value.images, ...formData.value.video],
        uuid: currRow.value.uuid, // 使用 currRow.value.uuid
      };

      api
        .workOrderUpdateById(requestData)
        .then((res) => {
          console.log("处理成功", res);
          uni.showToast({
            title: "处理成功",
            icon: "success",
          });
          close();
          $emit("submit");
        })
        .catch((error) => {
          console.error("处理失败", error);
          uni.showToast({
            title: "处理失败，请重试",
            icon: "none",
          });
        });
    })
    .catch((err) => {
      console.log("校验错误:", err);
    });
};

const handleModePopup = ref();
const selectHandleMode = (item: { value: string; text: string }) => {
  formData.value.handleMode = item.value;
};

const formData = ref({
  handleMode: "",
  faultDesc: "",
  images: [],
  video: [],
});

const faultTypeList = ref([]);

onMounted(async () => {
  try {
    const res = await api.baseapiDmListDm({ dm_sjdm: "tackle_measure_dict" });
    if (res.code === 0 && res.data) {
      faultTypeList.value = res.data.map((item: any) => ({
        value: item.dm_bm,
        text: item.dm_mc,
      }));
    }
  } catch (error) {
    console.error("获取处理措施列表失败", error);
  }
});

defineExpose({ open });
</script>

<style lang="scss" scoped>
.dialog-container {
  width: 100%;
  background: #fff;
  max-height: 80vh;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .uni-forms {
    padding: 0 30rpx;
    flex: 1;
    overflow: auto;
    .uni-forms-item {
      margin-bottom: 10rpx !important;
      &.item-bg {
        flex-wrap: wrap;
        :deep(.uni-forms-item__content) {
          width: 100%;
          flex: auto;
        }
        :deep(.upload-tips) {
          position: absolute;
          left: 75px;
          bottom: 0;
          top: -32px;
        }
      }
      .fault-type-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx 0;
        color: #666;
        font-size: 28rpx;
      }
    }
  }
  .btn-group {
    padding: 20rpx 40rpx;
  }
}

.dialog-title {
  font-weight: 500;
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 24rpx;
  height: 85rpx;
  line-height: 85rpx !important;
  text-align: center;
  background: #5e93ff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
}

.section {
  margin-bottom: 40rpx;

  &-title {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
}

.tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
  margin-top: 40rpx;

  .btn {
    padding: 16rpx 48rpx;
    border-radius: 8rpx;
    font-size: 28rpx;

    &.cancel {
      background: #f5f5f5;
      color: #666;
    }

    &.confirm {
      background: #007aff;
      color: white;
    }
  }
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
</style>
